.overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(2px) grayscale(80%);
  background: rgb(var(--color-neutral-background-raw) / 70%);
  inset: -16px -24px;
}

.container {
  // Gradient border effect using padding + background + pseudo-element
  padding: 2px;
  background: linear-gradient(109.47deg, var(--color-accent-canteloupe-base) 0%, var(--color-accent-persimmon-base) 50%, var(--color-accent-plum-base) 100%);
  border-radius: 12px;
  width: 780px;
  box-shadow: 0 8px 24px rgb(var(--color-neutral-shadow-raw) / 24%),  0 4px 16px rgb(var(--color-neutral-shadow-raw) / 32%);
  position: relative;
  transform: translateY(-3rem);

  // Inner content container with actual background
  &::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--color-neutral-background);
    opacity: 0.95;
    border-radius: 10px;
    z-index: 0;
  }

  // All children need to be above the pseudo-element
  > * {
    position: relative;
    z-index: 1;
  }
}

.content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-base);
}

.badge {
  transform: scale(1.4);
}

.title {
  // Typography component handles font styles
  margin: 0;
}

.description {
  // Typography component handles font styles
  max-width: 600px;
  margin: 0;
}

.actions {
  display: flex;
  gap: var(--spacing-base);
  margin-top: var(--spacing-tight);
  flex-wrap: wrap;
  justify-content: center;

  button {
    white-space: nowrap;
  }
}

